<template>
  <div class="fds-chart">
    <el-row>
      <h1> FDS 数据 </h1>
    </el-row>
    <panel-group @handleSetLineChartData="handleSetLineChartData" @handleSetRecord="handleSetRecord" />
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
  </div>
</template>

<script>
import LineChart from './charts/LineChartHistory'
import PanelGroup from './charts/PanelGroupHistory'
import { getToken } from '@/utils/auth'

const lineChartData = {
  tan_delta: {
    expectedData: []
  },
  e_real: {
    expectedData: []
  },
  e_imaginary: {
    expectedData: []
  },
  c_real: {
    expectedData: []
  },
  c_imaginary: {
    expectedData: []
  }
}

export default {
  name: 'Chart',
  smooth: true,
  components: {
    LineChart,
    PanelGroup
  }, data() {
    return {
      headers: {
        'Authorization': getToken()
      },
      lineChartData: lineChartData.tan_delta,
      recordid: 1
    }
  }, created() {
    this.getChartData()
  }, methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    handleSetRecord(recordid) {
      this.recordid = recordid
      console.log('record id: ' + this.recordid)
      this.getChartData()
    },
    getChartData() {
      var axios = require('axios')

      var config = {
        method: 'get',
        url: 'http://localhost:8013/api/fdsData/record/' + this.recordid,
        headers: {
          'Authorization': this.headers.Authorization
        }
      }

      axios(config)
        .then(function(response) {
          lineChartData.tan_delta.expectedData = response.data.tan_delta.data
          lineChartData.e_real.expectedData = response.data.e_real.data
          lineChartData.e_imaginary.expectedData = response.data.e_imaginary.data
          lineChartData.c_real.expectedData = response.data.c_real.data
          lineChartData.c_imaginary.expectedData = response.data.c_imaginary.data
          console.log(response.data)
        })
        .catch(function(error) {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>
.fds-chart {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}
</style>
